<template>
	<div class="discoveryMarketingChart">
		<group class="discoveryMarketing">
			<div style="margin-top: 10px">
				<span style="font-weight: bold; font-size: 18px; padding-left: 5px">{{chartTitle}}</span>
				<span style="float: right; font-size: 12px;">
					<span style="font-weight: bold">日期：</span><span style="color: darkred">{{marketingCurYYMM}}</span>
					<span style="font-weight: bold; padding-left: 15px;">月总数：</span><span style="color: darkred">{{marketingMonthValue}}个</span>
					<span v-if="showToday == true" style="font-weight: bold; padding-left: 15px;">今日：</span><span v-if="showToday == true" style="color: darkred">{{marketingTodayValue}}个</span>
				</span>
			</div>

			<v-chart
				ref="demo"
				:data="data">
				<v-bar :colors="barColor" />
				<v-tooltip :show-item-marker="false" />
			</v-chart>

			<div style="text-align: center; margin-bottom: 10px;">
				<x-button mini @click.native="goPre"> 《 </x-button>
				<x-button mini @click.native="goCur"> 本月 </x-button>
				<x-button mini @click.native="goNext"> 》 </x-button>
			</div>
		</group>
	</div>
</template>

<script>
	import {Group, VChart, VBar, VTooltip, XButton} from 'vux'
	import dateutils from '@/utils/date'
	import NetWorking from '../../../../utils/networking'
	export default {
		name: "discovery-marketing-chart",
		components: {
			Group,
			VChart,
			VBar,
			VTooltip,
			XButton
		},
		props: ['chartTitle', 'url', 'barColor'],
		data() {
			return {
				keyValue: [],
				data: [{time: 0, value: 0}], //这里有个bug，必须初始化time, value，否则后面即使赋值也不起作用,
				marketingCurYYMM: '',
				marketingTodayValue: '',
				marketingMonthValue: 0,
				marketingCurDate: '',
				showToday: true
			}
		},
		created: function () {
			this.init();
		},
		watch: {
			marketingCurYYMM: function () {
				let date = dateutils.getYYMM(new Date())
				if(this.marketingCurYYMM != date){
					this.showToday = false
				}else{
					this.showToday = true
				}
			}
		},
		methods: {
			goPre: function () {
				this.marketingMonthValue = 0
				this.data = [{time: 0, value: 0}]
				this.marketingCurDate = dateutils.convertDateFromString(dateutils.getPreMonthDate(this.marketingCurDate))
				this.fetchData(this.marketingCurDate)
			},
			goNext: function () {
				this.marketingMonthValue = 0
				this.data = [{time: 0, value: 0}]
				this.marketingCurDate = dateutils.convertDateFromString(dateutils.getNextMonthDate(this.marketingCurDate))
				this.fetchData(this.marketingCurDate)
			},
			goCur: function () {
				this.marketingMonthValue = 0
				this.data = [{time: 0, value: 0}]
				this.marketingCurDate = new Date()
				this.fetchData(this.marketingCurDate)
			},
			init: function () {
				this.marketingMonthValue = 0
				this.data = [{time: 0, value: 0}]
				this.marketingCurDate = new Date()
				this.fetchData(this.marketingCurDate)
			},
			fetchData: function (date) {
				let _this = this

				let dateYYMM = dateutils.getYYMM(date)
				let today = date.getDate()

				_this.marketingCurYYMM = dateYYMM

				NetWorking.doGet(
					_this.url,
					null,
					{
						params: {
							dateYYMM: dateYYMM
						}
					}
				).then(
					response => {
						let rs = response.data
						if (rs.error_code == 0) {
							let hasItem = false
							_this.keyValue = rs.ai_status_month

							if (_this.keyValue.length > 0) {
								_this.data = [] //the bug workaround

								for (let i = 0; i < _this.keyValue.length; i++) {
									_this.marketingMonthValue += parseInt(_this.keyValue[i].value)
								}
							}

							let days = dateutils.mGetDate(date.getFullYear(), date.getMonth() + 1)
							for (var i = 1; i <= days; i++) {
								for (var j = 0; j < _this.keyValue.length; j++) {
									if (_this.keyValue[j].key == i) {
										_this.data.push({
											'time': _this.keyValue[j].key.toString(),
											'value': parseInt(_this.keyValue[j].value)
										})
										hasItem = true
										break
									}
								}
								if (hasItem) {
									hasItem = false
								} else {
									_this.data.push({'time': i.toString(), 'value': 0})
								}

								if (today == i) {
									_this.marketingTodayValue = _this.data[i - 1].value
								}
							}
						} else {
							alert(rs.error_message)
						}
					}
				)
			}
		}
	}
</script>

<style scoped>

</style>